<template>
    <div class="from_vals-wrapper">
        <component v-if="components_name" :is='components_name' :field="field" :ctl="ctl" @setVo='toSetEditVo'
                   :param="param" :editType="editType"></component>
    </div>
</template>

<script>
    import tool from 'src/util/tool';
    import util from '_util/index';
    import logic from '_logic';

    import mytext from 'components/field/text';
    import myhidden from 'components/field/hidden';
    import myenum from 'components/field/enum';
    import enum_many from 'components/field/enum_many';
    import enum_chb from 'components/field/enum_chb';
    import mybind from 'components/field/bind';
    import mytextArea from 'components/field/textArea';
    import mydate from 'components/field/date';
    import mypic from 'components/field/pic';
    import mypics from 'components/field/pics';
    import mynum from 'components/field/num';
    import field_zip from 'components/field/field_zip';
    import city from 'components/field/city';
    import rich from 'components/field/rich';
    import custom from 'components/field/custom';
    import show_text from 'components/field/show_text';
    import show_line from 'components/field/show_line';
    import show_rich from 'components/field/show_rich';
    import date_range from 'components/field/date_range';
    import enum_item from 'components/field/custom/enum_item';
    import pics_pic from 'components/field/pics_pic';
    import bindSearch from 'components/field/custom/bind_search';

    export default {
        data() {
            return {
                val: '',
                components_type: 1,
                components_name:"",
                // components_name_arr: ['', 'myenum','enum_many','rich','show_text', 'myenum', 'mypics','mypics','mybind','mybind'],
                /*下标=> 1:单选,2:复选,3:文本编辑器,4:文本框,5:下拉单选,6:单张图片上传,7:多张图片上传,8:单选搜索框,9:多选搜索框, 10:城市单选, 11:城市多选*/

                /*12:city//城市
                 14:show_line//单行展示
                 15:show_text//文本展示
                 16:show_rich//富文本展示
                 17:date_range//日期范围
                 18:enum_many//枚举(多选)
                 19:enum_chb//枚举(checkbox)
                 20:myhidden//隐藏字段
                 13:custom//自定义
                 11:field_zip//字段组
                 1:mytext//字符串
                 9:rich//富文本
                 6:mybind//绑定
                 2:mytextArea//文本
                 5:mydate//日期
                 7:mypics//图片
                 10:mypics//图片
                 4:mynum//数字
                 3:myenum//枚举(单选)
                 */
                // components_name_arr: ['', 'enum_item','enum_item','rich','mytextArea', 'enum_item', 'pics_pic','pics_pic','mybind','mybind', 'city', 'city'],
                components_name_arr: ['', 'enum_item','enum_item','rich','mytextArea', 'enum_item', 'pics_pic','pics_pic','bindSearch','bindSearch', 'city', 'city'],
            }
        },
        components: {
            city,
            mytext,
            myhidden,
            custom,
            show_line,
            show_text,
            show_rich,
            rich,
            mytextArea,
            mydate,
            myenum,
            date_range,
            enum_many,
            enum_chb,
            mypic,
            mypics,
            mynum,
            field_zip,
            mybind,
            enum_item,
            pics_pic,
            bindSearch,
        },
        methods: {
            toSetEditVo(name, val) {
                this.$emit('setVo', name, val)
            },
            doActive({name, val}){
                if(name == "show_type"&&this.components_type!=val){
                    this.$emit('setVo', this.field.name, "")
                    this.field.bind_type = val== 9? 1: 0;
                    this.components_name = this.components_name_arr[val];
                    this.components_type = val;
                }

            }
        },
        watch: {
            val: function (val, old) {
                if (val != old) {
                    this.$emit('setVo', this.field.name, val)
                }
            },
        },
        computed: {

        },
        props: ['field', 'ctl', 'param', 'editType'],
        created() {
            util.eventOn(this, 'for_show_type_change', this.doActive);
            this.$emit('setVo', this.field.name, this.field.fval);
        },
    };
</script>

<style scoped>
</style>
